<template>
  <div>
    <Left  v-if="isPage"/>
    <Right v-if="isPage"/>
    <Toolbar />
    <div  class="page-show-btn" @click="showPage" :class='isPage ? "" : "arrowRight"'>
      <span  :class='isPage ? "el-icon-arrow-left" : "el-icon-arrow-right"' style="cursor:poiner;font-size:.12rem;vertical-align: super;"></span>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Left from "@/pages/left/Left";
import Right from "@/pages/right/Right";
import Toolbar from "@/pages/right/Toolbar";
import Buttons from "@/pages/right/Buttons";
export default {
  name: "Home",
  components: {
    Right,
    Left,
    Toolbar,
    Buttons,
  },
  data() {
    return {
      isPage:true
    };
  },
  mounted() {
    //viewer.terrainProvider = Cesium.createWorldTerrain();
    //this.$cp.flyTo(118.35319899720683,28.575263168288448,105598,6.230931256407987,-1.0038461609351086,0.0004425358485908859)
  },
  beforeDestroy() {
    // this.$cp.viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider({
    //   ellipsoid: Cesium.Ellipsoid.WGS84,
    // });
  },
  methods: {
    showPage(){
      this.isPage = !this.isPage
    }
  },
};
</script>

<style lang="stylus" scoped>
@import '../../assets/css/varibles.styl'; 
  .fade-enter-active{     
    transition: opacity .5s;      //类名：隐藏到显示过程所需要的时间
  }
  .fade-enter {           // 类名:初始化状态
    height: 0;
  }
  .page-show-btn{
    position: fixed;
    top: 1.1rem;
    left: 3.33rem;
    height: .3rem;
    background: #9cc6ff;
    width: .2rem;
    line-height: .3rem;
    text-align: center;
    z-index: 2;
    border-radius: .03rem;
    cursor: pointer;
  }
  .arrowRight{
    left: .33rem;
  }
    
</style>